/** 布局类
 * @module      _layout.scss
 * @description 布局类样式
 * @author      wulidoge
 * @email       wulidoge@qq.com
 * @date        2025-06-07
 */

// 弹性布局：默认主轴为 X
// # 收缩性原则：每个元素尽量占用少的空间，且最好与自身视觉重心和范围对齐
// # 这样可以避免许多预料之外的情况发生
// # 因此不设置 width height 而是让 flex-box 默认由子元素撑开
flex-box,
.flex {
    // margin: 0;
    // padding: 0;
    // box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // 纵向弹性盒：主轴为 Y
    &-col {
        @extend .flex;
        flex-direction: column;
    }
    // 主轴对齐方式
    &.justify-content,
    &.jc {
        &-start,
        &-s {
            justify-content: start;
        }
        &-center,
        &-c {
            justify-content: center;
        }
        &-flex-end,
        &-fe {
            justify-content: flex-end;
        }
        &-space-around,
        &-sa {
            justify-content: space-around;
        }
    }
    // 副轴对齐方式
    &.align-items,
    &.items,
    &.ai {
        &-start {
            align-items: start;
        }
        // &-flex-start,
        // &-fs {
        // 	align-items: flex-start;
        // }
        &-stretch {
            align-items: stretch;
        }
    }
    // 弹性子元素
    item,
    .item {
        // width: 100%;
        &.flex-shrink-0,
        &.shrink-0,
        &.fs-0 {
            flex-shrink: 0;
        }
        &.f-0 {
            flex: 0;
        }
        &.f-1 {
            flex: 1;
        }
        &.f-2 {
            flex: 2;
        }
        &.f-3 {
            flex: 3;
        }
    }
}

// 网格布局
grid-box,
.grid {
    display: grid;
    item,
    .item {
    }
}
